<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>testPostJson</title>
</head>
<body>
    <button onclick="sendJson()">发送 JSON 格式 POST请求</button>

</body>
<script>
    function sendJson(){
        ajax({
            URL: "http://127.0.0.1:8080/test/postParameterJson",
            method: 'POST',
            url: 'postParameterJson',
            method: 'POST',
            contentType: 'application/json; charset=utf-8',
            body: JSON.stringify({ userId: 123, classId: 456 }),

            callback: function (body, status) {
                console.log(body);
           }
    });
  }

  // 后面一直还有一个 ajax函数， 应该就是对状态变化做出响应的那个函数
  // 这里 不是一开始的浏览器向服务器发送请求， 而是在已经有连接的基础上， 进一步改变页面内容
  function ajax(args) {
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function() {
            if(xhr.readyState == 4){
                // 这里的这个args 应该是 发送的请求的意思，就是说当请求已经处理完毕了
                // 这里有个疑问 ， 这里不是网页，也就是客户端吗， 为什么要处理请求
                args.callback(xhr.responseText, xhr.status);
                // 应该是和绗棉的 回调函数相呼应， 调用的是上面那个回调函数的函数处理逻辑
            }
        }
        // 这里处于 1 链接已经建立后的情况， 开始open 构建请求
        xhr.open(args.method, args.url);
        if(args.contentType) {
            xhr.setRequestHeader('Content-type', args.contentType);    // 这里是在设置请求头啊
        }
        if(args.body) { // 这里的意思是 如果请求有内容的话，那么原样发回，如果没有，那么就不带多的内容
            xhr.send(args.body);
        } else {
            xhr.send()
        }

  }



</script>


</html>